import React from 'react';
import { Button } from 'element-react';
import {Footer} from '../Components';
import {connect} from 'react-redux';

export default class Home extends React.Component{
    render(){
        var style={
            Banner:{
                width:"1200px",
                height:"390px",
               margin:'0 auto'
            },
            Main1:{
                marginTop:"20px"
            },
            header:{
                textAlign:'center'
            },
            yuan:{
                marginLeft:'110px'
            }

        }
        return(
        <div>
            {/* banner */}
            <div id="myCarousel" className="carousel slide" data-ride="carousel">
                <ol className="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" className="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                    <li data-target="#myCarousel" data-slide-to="3"></li>
                </ol>
                <div className="carousel-inner" role="listbox">
                    <div className="item active">
                    <img style={style.Banner}  src="./img/1.png"/>     
                        <div className="container">
                    </div>
                    </div>
                    <div className="item">
                    <img style={style.Banner}  src="./img/2.png" alt="Second slide"/>
                    <div className="container">
                       
                    </div>
                    </div>
                    <div className="item">
                    <img style={style.Banner}  src="./img/3.png" alt="Third slide"/>         
                     <div className="container">
                     </div>
                    </div>
                    <div className="item">
                    <img style={style.Banner}  src="./img/5.png" alt="Fourth slide"/>         
                     <div className="container">
                    </div>
                    </div>
                </div>
                <a className="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span className="sr-only">Previous</span>
                </a>
                <a className="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span className="sr-only">Next</span>
                </a>
            </div> 
            {/* main -1 */}
        <div className="container" style={style.Main1}>
            <div className="alert alert-info" role="alert" style={{backgroundColor:'rgba(0,0,0, 0.8)'}}>
                 <a href="#" className="alert-link" style={{color:'white'}}>热点产品</a>
            </div>
            <div className="row">
                <div className="col-lg-4">
                <img className="img-circle" 
                src="https://img.alicdn.com/bao/uploaded/i4/196993935/TB1P5oiXIyYBuNkSnfoXXcWgVXa_!!0-item_pic.jpg_b.jpg" alt="Generic placeholder image" width="140" height="140" style={style.yuan}/>
                <h3 style={style.header}>羽绒服</h3>
                <p style={{height:'100px'}}>冬日新品，男装 高级轻型羽绒无缝连帽外套优衣库UNIQLO</p>
                <p style={style.header}><a className="btn btn-default" href="./#/detail/5a73db9d39122d24d4a274a4/1/%E7%BE%BD%E7%BB%92%E6%9C%8D" role="button">查阅详情 &raquo;</a></p>
                </div>
                <div className="col-lg-4">
                <img className="img-circle" 
                src="https://gw.alicdn.com/bao/uploaded/i4/903224475/TB1AKNSc_JYBeNjy1zeXXahzVXa_!!0-item_pic.jpg" alt="Generic placeholder image" width="140" height="140" style={style.yuan}/>
                <h3 style={style.header}>男士运动手表</h3>
                <p style={{height:'100px'}}>冠琴多功能运动手表男士三眼防水精钢带夜光潮流男石英表</p>
                <p style={style.header}><a className="btn btn-default" href="./#/detail/5aa7a1bb044aef2b34e9aa22/1/%E7%94%B7%E5%A3%AB%E8%BF%90%E5%8A%A8%E6%89%8B%E8%A1%A8" role="button">查阅详情 &raquo;</a></p>
                </div>
                <div className="col-lg-4">
                <img className="img-circle"
                src="http://img550.5lux.com.cn/2018/03/07/gh/152038050657_1571x2000.JPG" alt="Generic placeholder image" width="140" height="140" style={style.yuan}/>
                <h3 style={style.header}>POLER</h3>
                <p style={{height:'100px'}}>【包邮 免关税】POLER Rucksacks & Bumbags 男</p>
                <p style={style.header}><a className="btn btn-default" href="./#/detail/5aa7a242044aef2b34e9aa23/1/POLER" role="button">查阅详情 &raquo;</a></p>
                </div>
            </div>

        </div>
            {/* main -2 */}
        <div className="container" style={style.Main1}>
           
            <div className="alert alert-success" role="alert" style={{backgroundColor:'rgba(0,0,0, 0.8)'}}>           
                <a href="#" className="alert-link" style={{color:'white'}}>今日要闻</a>
            </div>
        
        <div className="row featurette">
            <div className="col-md-7">
                <h2 className="featurette-heading">飞亚达艺系列双面绣限量狗年特别款“瑞犬纳福” 即将亮相2018年巴塞尔钟表展 </h2>
                <p className="lead" style={{fontSize:'16px',marginTop:"50px"}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;飞亚达艺系列双面绣限量狗年特别款“瑞犬纳福”即将亮相2018年巴塞尔钟表展。
                十二生肖主题的艺术臻品并不少见，但以微观世界的融合变幻，塑以时光唯美含义的佳作数量不多。
                <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这几年来，飞亚达陆续推出多款应合年份时节的精微绣腕表，每一款，都凝结着千百年的古老技艺、精心雕琢的匠人精神以及东方的美学气韵，以“艺系列”进行命名，传达着新年美好的祝福。无论是十二生肖，还是鱼游潜底，喜鹊呢喃，都代表着独特的中国韵味。这些惟妙惟肖的腕表臻品，均出自中华古老的精微绣技艺。
                <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大师用针线在微观世界中描摹出中国文化的趣味，赋予腕上时计艺术之美，将传统东方美学进行极致的具象呈现。在见微知著的视觉体验中，为佩戴者带来新年的期许。
                </p>
            </div>
            <div className="col-md-5">
                <img className="featurette-image img-responsive center-block" src="http://www.yoka.com/dna/pics/ba1ea313/1/d3d5d5d3bdab33e5d71.jpg" alt="Generic placeholder image"/>     </div>
            </div>

            <hr className="featurette-divider"/>

            <div className="row featurette">
            <div className="col-md-7 col-md-push-5">
                <h2 className="featurette-heading">高级女装黄金时代最后一位巨人陨落 纪梵希的精彩人生</h2>
                <p className="lead"  style={{fontSize:'16px',marginTop:"40px"}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;又一位高级女装黄金时代的代表大师离开了我们，Hubert de Givenchy在2018年3月10日去世，享年91岁。他的终身伴侣Philippe Venet和Givenchy品牌公布了这个消息。
                <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;回顾这位设计大师的一生，“了无遗憾”可以说是最贴切的形容，他不像其他艺术大师那样只专注于创作而在人生中留下遗憾或争议，他走之后，只有美的传说和无尽怀念供人缅怀。
                <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hubert de Givenchy出身于一个贵族家庭，家族历史可以追溯到1713年在威尼斯封爵.</p>
            </div>
            <div className="col-md-5 col-md-pull-7">
                <img className="featurette-image img-responsive center-block" src="http://www.yoka.com/dna/pics/ba1ea313/1/d3d5d5dae5e3dcc77d1.jpg" alt="Generic placeholder image"/> 
            </div>
            </div>

            <hr className="featurette-divider"/>

            <div className="row featurette">
            <div className="col-md-7">
                <h2 className="featurette-heading">Yeezy Boost 350 V2 “Butter” 配色曝光</h2>
                <p className="lead" style={{fontSize:'16px',marginTop:"40px"}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;伴随 Yeezy Boost 350 V2 近几次发售货量的增加，全新配色的炒价也不断在随之下跌，不过爆料账号 YEEZY MAFIA 日前就再度曝光了一双疑似 Yeezy Boost 350 V2 全新配色 “Butter” 的预览图片。
                <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鞋面依旧是以 adidas 当家的 Primeknit 科技打造，
不过爆料账号 YEEZY MAFIA 日前就再度曝光了一双疑似 Yeezy Boost 350 V2 全新配色 “Butter” 的预览图片。
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鞋面依旧是以 adidas 当家的 Primeknit 科技打造，整体色调与早前发售的纯白配色相近，隐约还是可以看到荧光黄的色调在其中。</p>
            </div>
            <div className="col-md-5">
                <img className="featurette-image img-responsive center-block" src="http://www.yoka.com/dna/pics/ba1ea31b/d3d5dc53ecba53c9c7.jpg
                " alt="Generic placeholder image"/>   
             </div>      
           </div>
           </div>

    
           {/*  用户 */}
        <div className="container" style={style.Main1}>
                
            <div className="alert alert-warning" role="alert" style={{backgroundColor:'rgba(0,0,0, 0.8)'}}>           
                <a href="#" className="alert-link" style={{color:'white'}}>用户反馈</a>
            </div>
            
            <div className="media">
                <div className="media-left media-middle">
                    <a href="#">
                    {/* <img className="media-object" src="../../img/ban1.jpg" alt="..."/> */}
                    </a>
                </div>
                <div className="media-body">
                    <h4 className="media-heading"><b>潮犬出没，叫你有“型”</b></h4>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生肖狗年来临，时尚界一线大牌们纷纷推出狗年限量设计，从狗形象的挂饰、到带有狗元素的设计单品，哪怕是与狗有关的语录，都变得备受推崇。生活中四处弥漫着与狗相关的物件和话题，这也不禁让人联想到那部经久不衰的话剧经典：孟京辉导演的作品《两只狗的生活意见》。
                </div>
            </div>
            <div className="media">
                <div className="media-left media-middle">
                    <a href="#">
                    {/* <img className="media-object" src="../../img/ban1.jpg" alt="..."/> */}
                    </a>
                </div>
                <div className="media-body">
                    <h4 className="media-heading"><b>商品以次充好、疑似虚假宣传</b></h4>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;近日，号称有3亿用户的移动社交电商平台拼多多深陷用户投诉泥潭。中新经纬客户端注意到，在知乎、微博等社交平台，甚至与拼多多相关新闻报道的评论区，用户投诉拼多多商品质量差、虚假宣传、假货横行、客服态度差的声音不绝于耳。
                </div>
            </div>
            <div className="media">
                <div className="media-left media-middle">
                    <a href="#">
                    {/* <img className="media-object" src="../../img/ban1.jpg" alt="..."/> */}
                    </a>
                </div>
                <div className="media-body">
                    <h4 className="media-heading"><b>快手为何持续领跑短视频行业？</b></h4>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;快手在“视频播放和编辑”榜单中，位于腾讯视频、爱奇艺、优酷之后，成为该榜单中唯一的短视频平台。不仅其下载量居首位，用户活跃度和忠诚度也远高于其他。2017年11月，快手的月活跃用户超越了今日头条，跃居所有App第8位，并一直保持至今。为何快手仿佛“开了挂”般，各项都稳居榜首？一方面，受益于庞大的用户群体。另一方面，快手不断丰富话题，提高用户活跃度。
                </div>
            </div>

           
        </div>
        <Footer/>
        </div>
        )
    }
}